<template>
  <a-button class="button" type="primary" preIcon="ant-design:plus-outlined" :class="buttonClasses" @click="$emit('click')">
    <slot></slot>
  </a-button>
</template>

<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps<{
    variant?: 'primary' | 'secondary' | 'ghost';
    size?: 'sm' | 'md' | 'lg';
  }>();

  const buttonClasses = computed(() => {
    const variant = props.variant || 'secondary';
    const size = props.size || 'md';

    const variants = {
      primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
      secondary: 'bg-gray-100 text-gray-800 hover:bg-gray-200 focus:ring-gray-500',
      ghost: 'bg-transparent hover:bg-gray-100 focus:ring-gray-500',
    };

    const sizes = {
      sm: 'px-3 py-1 text-sm',
      md: 'px-4 py-2',
      lg: 'px-6 py-3 text-lg',
    };

    return `${variants[variant]} ${sizes[size]}`;
  });
</script>

<style lang="scss" scoped>
  .button {
    background-color: #5662f6;
    width: 75%;
    height: 40px;
    border-radius: 30px;
    font-size: 17px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
